import * as React from "react";
import {Box, Grid, Stack, Typography} from "@mui/material";
import {useTodayAttendance} from "../../hooks/useTodayAttendance.ts";
import {useState} from "react";

interface Data {
    check_in_time: string;
    check_out_time: string;
    status: string;
}

const TodayAttendance: React.FC = () => {

    const {todayAttendance, data, error} = useTodayAttendance();

    const [statusText, setStausText] = useState('查询中');
    const [checkInTime, setCheckInTime] = useState('');
    const [checkOutTime, setCheckOutTime] = useState('');

    const handleTodayAttendance = async () => {
        await todayAttendance();
        if (error) {
            setStausText(error);
            return;
        }

        if (data) {
            const mainData = JSON.parse(data) as Data;
            if (mainData.status == 'late') {
                setStausText('迟到')
            } else if (mainData.status == 'leave early') {
                setStausText('早退')
            } else if (mainData.status == 'normal') {
                setStausText('正常')
            } else {
                setStausText('迟到并且早退')
            }
            setCheckInTime(mainData.check_in_time);
            setCheckOutTime(mainData.check_out_time);
        }
    };

    // 开始就执行
    React.useEffect(() => {
        handleTodayAttendance();
    }, [data]);

    return (
        <Box>
            <Grid container justifyContent="center" alignItems="center" spacing={2}
                  style={{minHeight: '100vh'}}>
                <Grid item xs={6}>
                    <div style={{
                        padding: '5%',
                        paddingBottom: '8%',
                        border: '1px solid #ccc',
                        borderRadius: '25px',
                        background: 'linear-gradient(to bottom, #eef6fd, #c8f5ec, #98ede1, #3b979b)',
                        boxShadow: '0px 2px 5px rgba(0, 0, 0, 0.2)',
                        backgroundRepeat: 'no-repeat',
                        backgroundAttachment: 'scroll',
                        backgroundSize: 'cover',
                        backgroundPosition: 'center center',
                    }}>
                        <Stack direction="column" spacing={4} justifyContent="center" alignItems="center"
                               sx={{marginTop: '10%', marginBottom: '10%'}}>
                            <Typography variant='h4'>
                                今日考勤情况
                            </Typography>
                            <Stack direction="row" spacing={2} justifyContent="center" alignItems="center">
                                <Typography variant='h5'>
                                    状态:
                                </Typography>

                                {/*考勤状态*/}
                                <Typography variant='h5'>
                                    {statusText}
                                </Typography>
                            </Stack>
                            <Stack direction="row" spacing={2} justifyContent="center" alignItems="center">
                                <Typography variant='body1'>
                                    上班签到时间:
                                </Typography>

                                {/*上班签到时间*/}
                                <Typography variant='body1'>
                                    {checkInTime}
                                </Typography>
                            </Stack>
                            <Stack direction="row" spacing={2} justifyContent="center" alignItems="center">
                                <Typography variant='body1'>
                                    下班签到时间:
                                </Typography>

                                {/*下班签到时间*/}
                                <Typography variant='body1'>
                                    {checkOutTime}
                                </Typography>
                            </Stack>
                        </Stack>
                    </div>
                </Grid>
            </Grid>
        </Box>
    );
};

export default TodayAttendance;
